<template>
  <div class="companyDetails-container">
     <!-- 页头 -->
    <div class="nav-bar-box">
    <van-nav-bar ref="homeTitle" left-arrow left-text='家政平台' class="page-nav-bar" :border="false" @click-left="$router.back()" />
    </div>
    <ul>
      <li>
        <van-image
          height="200px"
          width="300px"
          :src="list['bannersd']"
        />
      </li>
      <li>
        <van-grid :column-num="2" :border="false">
          <van-grid-item><h5>{{list['rg-customers']}}</h5><span>注册家政客户数</span></van-grid-item>
          <van-grid-item><h5>{{list['at-customers']}}</h5><span>已认证客户数</span></van-grid-item>
        </van-grid>
         <div>
        <van-button class="fowllo-btn" round type="primary" color="#3F51B5">关注</van-button>
      </div>
      </li>
      <li>
        <van-sidebar>
          <van-sidebar-item title="业务范围" />
        </van-sidebar>
        <!-- <van-divider /> -->
        <van-grid :border="false" :column-num="4">
          <van-grid-item v-for="(item, id) in list['bs-img']" :key="id" >
            <van-image
              width="49px"
              height="49px"
              round
              :src="item['bss-img']" />
              <span>{{item.text}}</span>
          </van-grid-item>
        </van-grid>
      </li>
      <li>
        <van-tabs color="#3F51B5">
          <van-tab title="公司资料">
            <div v-for="(item, id) in list.companymsg" :key="id">
              <van-sidebar >
              <van-sidebar-item :title="item.title" />
            </van-sidebar>
            <van-grid :column-num="3" :border="false">
                <van-grid-item>
                  <van-image
                  height="50px"
                  width="75px"
                  :src="item.imgq" />
                </van-grid-item>
                <van-grid-item>
                  <van-image
                  height="50px"
                  width="75px"
                  :src="item.imgw" />
                </van-grid-item>
                <van-grid-item>
                  <van-image
                  height="50px"
                  width="75px"
                  :src="item.imge" />
                </van-grid-item>
              </van-grid>
              </div>
              <!-- <van-sidebar>
              <van-sidebar-item title="办公环境" />
            </van-sidebar>
            <van-grid :column-num="3" :gutter="6" :border="false">
                <van-grid-item>
                  <van-image
                  height="50px"
                  width="75px"
                  src="" />
                </van-grid-item>
                <van-grid-item>
                  <van-image
                  height="50px"
                  width="75px"
                  src="" />
                </van-grid-item>
                <van-grid-item>
                  <van-image
                  height="50px"
                  width="75px"
                  src="" />
                </van-grid-item>
              </van-grid>
              <van-sidebar>
              <van-sidebar-item title="获得荣誉" />
            </van-sidebar>
            <van-grid :column-num="3" :gutter="6" :border="false">
                <van-grid-item>
                  <van-image
                  height="50px"
                  width="75px"
                  src="" />
                </van-grid-item>
                <van-grid-item>
                  <van-image
                  height="50px"
                  width="75px"
                  src="" />
                </van-grid-item>
                <van-grid-item>
                  <van-image
                  height="50px"
                  width="75px"
                  src="" />
                </van-grid-item>
              </van-grid>
              <van-sidebar>
              <van-sidebar-item title="团队风采" />
            </van-sidebar>
            <van-grid :column-num="3" :gutter="6" :border="false">
                <van-grid-item>
                  <van-image
                  height="50px"
                  width="75px"
                  src="" />
                </van-grid-item>
                <van-grid-item>
                  <van-image
                  height="50px"
                  width="75px"
                  src="" />
                </van-grid-item>
                <van-grid-item>
                  <van-image
                  height="50px"
                  width="75px"
                  src="" />
                </van-grid-item>
              </van-grid> -->
          </van-tab>
          <van-tab title="注册人员">内容 2</van-tab>
        </van-tabs>
        <van-sidebar>
          <van-sidebar-item title="基本资料" />
        </van-sidebar>
            <van-cell v-if="list['basic-information']">
              <p>公司名称：{{list['basic-information'].coname}}</p>
              <p>法人代表：{{list['basic-information'].boss}}</p>
              <p>公司电话：{{list['basic-information'].phone}}</p>
              <p>公司规模：{{list['basic-information'].CompanySize}}</p>
              <p>公司地址：{{list['basic-information']['site-co']}}</p>
            </van-cell>
        <van-sidebar>
          <van-sidebar-item title="公司介绍" />
        </van-sidebar>
          <van-cell :border="false" :value="list.CompanyProfile" />
      </li>
    </ul>
    <!-- 底部社交选项栏按钮 -->
    <van-tabbar>
      <van-tabbar-item icon="share" color="#979191" size="24px">分享</van-tabbar-item>
      <van-tabbar-item icon="wechat" color="#979191" size="24px">微信联系</van-tabbar-item>
      <van-tabbar-item icon="phone" color="#979191" size="24px">电话联系</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import { getCompanysDetails } from '@/api/getcompany'
export default {
  props: {
    coId: {
      type: [Number, String, Object],
      default: ''
    }
  },
  data () {
    return {
      list: []
    }
  },
  created () {
    this.getCompanysDetails()
  },
  methods: {
    async getCompanysDetails () {
      // const { data } = await getCompanys()
      const { data } = await getCompanysDetails(this.coId)
      this.list = data[0]
      console.log(this.coId)
      // console.log(this.list)
      console.log(this.list)
    }
  }
}
</script>

<style scoped lang="less">
.companyDetails-container {
   background-color: #f8f8f8;
  /* 家政平台导航头部样式 */
  .nav-bar-box {
    // height: 88px;
    .page-nav-bar {
      background-color: #3f51b5 !important;
      height: 226px;
      /deep/ .van-nav-bar__text {
      color: #fff;
      font-weight: 700;
      }
      /deep/ .van-nav-bar__arrow {
      color: #fff;
      }
    }
  }
  ul {
    width: 600px;
    z-index: 1;
    position: absolute;
    top: 160px;
    left: 77px;
  }
  ul li:first-child {
    height: 400px;
  }
  li {
    width: 600px;
    margin-bottom: 10px;
    border: 1px solid;
  }
  span {
    font-size: 18px;
  }
  p {
    font-size: 12px;
  }
  .fowllo-btn {
    height: 50px;
    width: 152px;
    transform: translate(229px,-18px);
  }
}
</style>
